<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WEB01</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
        type="text/css"/>
  <script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"
          type="text/javascript"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap-3.1.1.min.js"
          type="text/javascript"></script>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>
</head>

<body>

<jsp:include page="head.jsp"/>

<div id="myCarousel" class="carousel slide">
  <!-- 轮播（Carousel）指标 -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- 轮播（Carousel）项目 -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="${pageContext.request.contextPath}/img/bartlesvillecf.jpg" style="height: 100%"
           alt="First slide">
    </div>
    <div class="item">
      <img src="${pageContext.request.contextPath}/img/2.jpg" style="height: 100%"
           alt="Second slide">
    </div>
    <div class="item">
      <img src="${pageContext.request.contextPath}/img/3.jpg" style="height: 100%"
           alt="Third slide">
    </div>
  </div>
  <!-- 轮播（Carousel）导航 -->
  <a class="carousel-control left" href="#myCarousel"
     data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true"
                              class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="carousel-control right" href="#myCarousel"
     data-slide="next"><span _ngcontent-c3="" aria-hidden="true"
                             class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!--
        作者：ci2713@163.com
        时间：2015-12-30
        描述：商品显示
      -->
<div class="container-fluid">
  <div class="col-md-12">
    <h2>热门商品&nbsp;&nbsp;<img src="${pageContext.request.contextPath}/img/title2.jpg"/></h2>
  </div>
  <div class="col-md-2" style="border:1px solid #E7E7E7;border-right:0;padding:0;">
    <img src="${pageContext.request.contextPath}/products/hao/big01.jpg" width="205" height="404"
         style="display: inline-block;"/>
  </div>
  <c:forEach items="${hots}" var="item">
    <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
      <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">
        <img src="${pageContext.request.contextPath}/${item.image}" width="130" height="130"
             style="display: inline-block;">
      </a>
      <p><a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}"
            style='color:#666'>${fn:substring(item.name,0 ,12 )}...</a></p>
      <p style="color: red">&yen;${item.shopPrice}</p>
    </div>
  </c:forEach>

</div>
</div>
<!--
        作者：ci2713@163.com
        时间：2015-12-30
        描述：广告部分
      -->
<div class="container-fluid">
  <img src="${pageContext.request.contextPath}/products/hao/ad.jpg" width="100%"/>
</div>
<!--
        作者：ci2713@163.com
        时间：2015-12-30
        描述：商品显示
      -->
<div class="container-fluid">
  <div class="col-md-12">
    <h2>最新商品&nbsp;&nbsp;<img src="${pageContext.request.contextPath}/img/title2.jpg"/></h2>
  </div>
  <div class="col-md-2" style="border:1px solid #E7E7E7;border-right:0;padding:0;">
    <img src="${pageContext.request.contextPath}/products/hao/big01.jpg" width="205" height="404"
         style="display: inline-block;"/>
  </div>

  <c:forEach items="${requestScope.news}" var="item">
    <div class="col-md-2 " style="text-align:center;height:200px;padding:10px 0px;">
      <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">
        <img src="${pageContext.request.contextPath}/${item.image}" width="130" height="130"
             style="display: inline-block;">
      </a>
      <p><a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}"
            style='color:#666'>${item.name}</a></p>
      <p style="color: red">&yen;${item.shopPrice}</p>
    </div>
  </c:forEach>
</div>
</div>
<!--
        作者：ci2713@163.com
        时间：2015-12-30
        描述：页脚部分
      -->
<jsp:include page="foot.jsp"/>
</body>

</html>